<template>
    <div>
        <el-row>
            <component :is="content"></component>
            <el-col :span="20">
                <h2 class="warranty-title">客户管理</h2>
                <el-dialog
                        title="添加客户"
                        :visible.sync="show"
                        width="80%"
                        center>
                    <el-form ref="form" label-width="80px">
                        <el-form-item label="客户名">
                            <el-input v-model="clientName"></el-input>
                        </el-form-item>
                        <el-form-item label="客户生日">
                            <el-input v-model="clientBirthday"></el-input>
                        </el-form-item>
                        <el-form-item label="客户性别">
                            <el-input v-model="clientSex"></el-input>
                        </el-form-item>
                        <el-form-item label="客户收入">
                            <el-input v-model="clientIncome"></el-input>
                        </el-form-item>
                        <el-form-item label="客户职业">
                            <el-input v-model="clientProfession"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="clientNumber"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="closeAdd">取消</el-button>
                    <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="addClient">添加</el-button>
                </el-dialog>
                <el-dialog
                        title="编辑客户"
                        :visible.sync="show2"
                        width="80%"
                        center>
                    <el-form ref="form" label-width="80px">
                        <el-form-item label="客户名">
                            <el-input v-model="clientName"></el-input>
                        </el-form-item>
                        <el-form-item label="客户生日">
                            <el-input v-model="clientBirthday"></el-input>
                        </el-form-item>
                        <el-form-item label="客户性别">
                            <el-input v-model="clientSex"></el-input>
                        </el-form-item>
                        <el-form-item label="客户收入">
                            <el-input v-model="clientIncome"></el-input>
                        </el-form-item>
                        <el-form-item label="客户职业">
                            <el-input v-model="clientProfession"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="clientNumber"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="closeAdd1">取消</el-button>
                    <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="changeClient">添加</el-button>
                </el-dialog>
                <div style="float:left">
                    <span>客户名：</span>
                    <el-input v-model="clientSearch" style="width: 200px;margin-left: 20px;margin-right: 10px;"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchClient">搜索</el-button>
                </div>
                <el-button type="primary" style="float: right;margin-left:18px" @click="openAddClient">添加客户</el-button>
                <el-table
                        :data="tableData"
                        border
                >
                    <el-table-column
                            prop="iid"
                            label="客户姓名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iname"
                            label="客户生日"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iprice"
                            label="客户性别"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iinfo"
                            label="客户收入"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iexpire"
                            label="客户职业"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iexpire"
                            label="联系方式"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                    >
                        <template slot-scope="scope">
                            <el-button @click="editClient(scope.row)" type="primary" size="small">修改客户信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import NavMenu from "../components/NavMenu";
    export default {
        name: "ClientManage",
        data(){
            return{
                content:NavMenu,
                tableData:[],
                show:false,
                clientSearch:'',
                clientName:'',
                clientBirthday:'',
                clientSex:'',
                clientIncome:'',
                clientProfession:'',
                clientNumber:'',
                show2:false,
                currentPage:1,
                total:10,
                pageSize:3,
                clientId:'',
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.$axios.get("api/clientList/"+this.currentPage+"/"+this.pageSize).then(
                    r=>{
                        this.tableData=r.data
                        this.total=r.data.total
                    }
                )
            },
            openAddClient(){
                this.show= true
            },
            closeAdd(){
                this.show=false
            },
            addClient(){
                if (this.clientName == '') {
                    this.$message({
                        message: '客户名必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.clientBirthday == '') {
                    this.$message({
                        message: '客户生日必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.clientSex == '') {
                    this.$message({
                        message: '客户性别必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.clientIncome == '') {
                    this.$message({
                        message: '客户收入必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.clientProfession == '') {
                    this.$message({
                        message: '客户职业必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.clientNumber == '') {
                    this.$message({
                        message: '客户电话必填',
                        type: 'warning'
                    });
                    return
                }
                let fd = new FormData
                fd.append("clientName",this.clientName)
                fd.append("clientBirthday",this.clientBirthday)
                fd.append("clientSex",this.clientSex)
                fd.append("clientIncome",this.clientIncome)
                fd.append("clientProfession",this.clientProfession)
                fd.append("clientNumber",this.clientNumber)
                this.$axios.post("api/addClient",fd).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.userName = ''
                            this.show=false
                        } else {
                            this.$message({
                                message: '添加失败',
                                type: 'error'
                            });
                        }

                    }                )
            },
            searchClient(){
                this.$axios.get("api/searchClient/"+this.clientSearch+"/"+this.currentPage+"/"+this.pageSize).then(
                    r=>{
                        this.tableData=r.data
                        this.total=r.data.total
                    }
                )

            },
            closeAdd1(){
                this.show2=false
            },
            editClient(row){
                this.show2=true
                this.clientName=row.clientName
                this.clientBirthday=row.clientBirthday
                this.clientSex=row.clientSex
                this.clientIncome=row.clientIncome
                this.clientProfession=row.clientProfession
                this.clientNumber=row.clientNumber
            },
            changeClient(row){
                let fd = new FormData
                this.clientId=row.clientId
                fd.append("clientId",this.clientId)
                fd.append("clientNumber",this.clientNumber)
                fd.append("clientIncome",this.clientIncome)
                fd.append("clientProfession",this.clientProfession)
              this.$axios.get("api/changeClient",fd).then(
                  r=>{
                      if (r.data == 200) {
                          this.$message({
                              message: '修改成功',
                              type: 'success'
                          });
                          this.userName = ''
                          this.show=false
                      } else {
                          this.$message({
                              message: '修改失败',
                              type: 'error'
                          });
                      }
                  }
              )

            }
        }
    }
</script>

<style scoped>

</style>